<template>
    <div class="app-container">
        <el-form ref="form" :model="businessForm" label-width="80px">
            <el-form-item label="角色名称">
                <el-input v-model="businessForm.roleName" placeholder="请输入角色名称"/>
            </el-form-item>
            <el-form-item label="角色代码">
                <el-input v-model="businessForm.roleCode" placeholder="请输入角色代码"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="float:right" >
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </div>
</template>

<script>
import { addRole } from '@/api/platform/role'
export default {
    name: "addRole",
    data(){
        return{
            buttonLoading: false,
            businessForm: {}
        }
    },
    methods: {
        submitForm(){
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.buttonLoading = true;
                    addRole(this.businessForm).then(res => {
                        if (res.retCode === '200') {
                            this.msgSuccess("新增成功");
                            this.cancel();
                            this.$emit("submitForm");
                            this.$refs["form"].resetFields()
                        }else {
                            this.$message.error('请求失败' + res.retCode);
                        }
                    }).finally(()=>{
                        this.buttonLoading = false;
                    });
                }
            });
        },
        cancel(){
            this.businessForm = {};
            this.$emit("cancelDialog");
        }
    }
}
</script>

<style scoped>

</style>
